<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>考勤管理</title>
<script type="text/javascript" src="static/easyui/jquery.min.js"></script>
<script type="text/javascript" src="static/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="static/easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="static/easyui/themes/icon.css">
<link rel="stylesheet" href="static/easyui/themes/metro-red/easyui.css">

</head>
<body>
<style type="text/css">
		ul{
	list-style:none;
	padding:0px;
}
.riqi{
	font-size:14px;
	line-height:30px;
}
.nav-tabs{
	height: 26px;
    border-bottom: 1px solid #19AA8D;
}
.nav-left{
	float:left;
	margin-top:-10px;
}
.top-se>li,.date-search{
	float:left;
	padding-left:5px;
}
.nav-right{
	float:right;
	margin-right:40px;
}
.nav-right ul li{
	float:left;
	padding-left:10px;
}
#statue{
	color:#6E6E6E;
	margin-top:3px;
}
#getup{
	background-color:#2FB197;
	color:white;
	cursor: pointer;
	width:80px;
	height:19px;
	text-alilgn:center;
	margin-left:10px;
}
.application{
	width:1080px;
	height:160px;
	background:white;
	margin:10px auto;
}
.application-left{
	height: 100%;
    width: 12%;
    float: left;
    
}
.application-right{
	width: 86%;
	height:100%;
    float: left;
    padding-right:20px;
}
.application-icon{
	width:80px;
	height:80px;
	background-repeat: no-repeat;
    background-size: 50px;
    display:block;
    margin: 20px auto;
}
.icon-head{
	background:url('static/easyui/themes/icons/head.png') no-repeat center center;
}
.application-right-top{
	height:30%;
	border-bottom: 1px solid #E6E6FA;
	padding-top:20px;
}
.application-right-bottom{
	height:56%
}
.pull-left{
	float:left;
}
.pull-right{
	float:right;
}
.application-right-bottom-left{
	float:left;
	width:30%;
	height:100%;
}
.application-right-bottom-right{
	float:right;
	width:70%;
	height:100%;
}
.info-item{
	height: 25px;
    line-height: 25px;
    font-weight: 400;
    font-size: 14px;
    color: #666;
    text-align: left;
}
</style>
<script type="text/javascript">
</script>
	<div class="easyui-layout" data-options="fit:true">
		<div data-options="region:'center'" style="background:#F3F3F3;">
			<div class="center-one" style="height:40px;background-color:#F3F3F3;margin:auto;">
	  			<ul class="nav-tabs">
		<div class="nav-left">
			<div class="date-search">
				<ul class="top-se" style="margin-left:20px;margin-top:5px;">
					<li class="riqi">申请日期</li>
					<li><input id="dd-start" type="text" class="easyui-datebox" required="required" style="width:150px;"></li>
					<li class="riqi">至</li>
					<li><input id="dd-end" type="text" class="easyui-datebox" required="required" style="width:150px"></li>
				</ul>
			</div>
			<div class="date-search" style="margin-top:5px;">
				<input id="ss" class="easyui-searchbox" style="width:25px;">
			</div>
		</div>
		<div class="nav-right">
				<ul>
					<li id="statue">流程状态：</li>
					<li>
					<select style="cursor: pointer;">
						<option>请选择</option>
						<option>审批中</option>
						<option>待归档</option>
						<option>同意</option>
						<option>拒绝</option>
						<option>撤销中</option>
						<option>同意撤销</option>
					</select>
					</li>
					<li id="getup">+发起申请</li>
				</ul>
			</div>
	        </ul>
 		    </div>
 		     <div class="application">
		<div class="application-left">
		<img class="application-icon icon-head" >
		</div>
		<div class="application-right">
			<div class="application-right-top">
				<div class="pull-left">
					<span style="font-weight: 400;font-size: 18px;color: #666;">休假申请</span>
					<span style="font-weight: 400;font-size: 13px;color: #999;margin-left: 5px;">xxxx年x月x日      xx时xx分xx秒</span>
				</div>
				<div class="pull-right">
					<button style="width: 77px; height: 22px;border-radius: 2px; font-weight: 400;font-size: 13px;color: #fff;padding-top: 3px;line-height:2px;">同意</button>
				</div>
			</div>
			<div class="application-right-bottom">
				<div class="application-right-bottom-left">
					<div class="info-item">休假类型：xxx</div>
					<div class="info-item">开始时间：xxxx年x月xx日xx时xx分xx秒</div>
					<div class="info-item">理由：zzz</div>
				</div>
				<div class="application-right-bottom-right">
					<div class="info-item">假期时长：aaa</div>
					<div class="info-item">结束时间：xxxx年x月xx日xx时xx分xx秒</div>
				</div>
			</div>
		</div>
	</div>
	
   </div>
  </div>
</body>
</html>